<template>


  <el-dialog :title="title" width="800px" :visible.sync="visible" destroy-on-close @close="closeCallback">
    <div class="card">
    <p class="title"><i class="fa fa-th-large fa-lg"></i>个人资料</p>


    <el-form :model="ruleForm2" status-icon :rules="rules" ref="ruleForm2" label-width="100px" class="demo-ruleForm">


      <el-form-item label="用户账号" prop="merchantAccount" >
        <el-input v-model="ruleForm2.merchantAccount" autocomplete="off" readonly></el-input>
      </el-form-item>

      <el-form-item label="手机号" prop="shopkeeperPhoneNumber" >
        <el-input v-model="ruleForm2.shopkeeperPhoneNumber"
                  clearable :style="{width: '100%'}" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="用户名" prop="shopkeeperName" >
        <el-input v-model="ruleForm2.shopkeeperName"
                  clearable :style="{width: '100%'}"></el-input>
      </el-form-item>

      <el-form-item label="身份证号码" prop="shopkeeperCardId" >
        <el-input v-model="ruleForm2.shopkeeperCardId"
                  clearable :style="{width: '100%'}" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="钱包密码" prop="bursePassword" >
        <el-input type="password" v-model="ruleForm2.bursePassword" autocomplete="off" show-password></el-input>
      </el-form-item>

      <el-form-item label="确认密码" >
        <el-input type="password" v-model="confirmPassword" autocomplete="off" show-password></el-input>
      </el-form-item>

      <el-form-item label="钱包余额">
        <el-input v-model="ruleForm2.burseBalance" autocomplete="off" readonly></el-input>
      </el-form-item>

      <el-form-item label="更新人">
        <el-input v-model="ruleForm2.updateBy" autocomplete="off"  readonly></el-input>
      </el-form-item>

      <el-form-item label="更新时间">
          <el-date-picker
            readonly
            v-model="ruleForm2.updateTime"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handelConfirm('ruleForm2')">确 定</el-button>
        <el-button @click="resetForm('ruleForm2')">重 置</el-button>
      </el-form-item>
    </el-form>
    </div>
  </el-dialog>
</template>

<script>
  import Cookie from "js-cookie"
  import axios from "axios"
  import moment from "moment"
export default {
  name: "userInfo",
  props: {
    title: {
      type: String,
      default: "账号信息"
    },
    dialogVisible: {
      type: Boolean,
      default: false
    },
    userId: {
      type: String,
      default: ""
    }
  },
  data () {
    return {
      confirmPassword: '',
      roleName: false,
      roleData: "",
      visible: this.dialogVisible,
      ruleForm2: {
        merchantAccount: '',
        shopkeeperPhoneNumber: '',
        shopkeeperName: '',
        shopkeeperCardId: '',
        bursePassword: '',
        confirmPassword: '',
      },
      rules: {
        shopkeeperName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            "pattern": "^[\\u4e00-\\u9fa5|A-Za-z0-9]+$",
            "message": "请输入中文、大小写英文、数字"
          }
        ],
        shopkeeperPhoneNumber: [
          {required: true,  message: '手机号格式不正确手机号', trigger: 'blur' },
          {
            "pattern": "^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(16[2|6|7])|(18[0-9])|(17([0-1]|[3]|[5-8]))|(19[1|8|9]))\\d{8}$",
            "message": "手机号格式不正确"
          }
        ],
        shopkeeperCardId: [
          {required: true,  message: '请输入身份证号码', trigger: 'blur'},
          {
            "pattern": "^[1-9]\\d{7}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}$|^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}([0-9]|X|x)$",
            "message": "身份证格式不正确"
          }
          ],
        bursePassword: [
          { required: true, message: '请输入钱包密码',trigger: 'blur'},
          {
            "pattern": "^\\d{6}$",
            "message": "格式为6位数字"
          }
          ],
      },
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList(){
      let merchant = Cookie.get("merchant");
      let information = JSON.parse(merchant);
      console.log(information+"---");
      this.ruleForm2 = information;
      this.confirmPassword = this.ruleForm2.bursePassword;
    },

    closeCallback () {
      this.$emit("successCallback")
    },
    handelConfirm() {
      this.$refs['ruleForm2'].validate(valid => {
        if (!valid) return

        if (this.confirmPassword == this.ruleForm2.bursePassword){

          this.ruleForm2.updateTime = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");

          let data = {

            merchantId: this.ruleForm2.merchantId,
            merchantAccount: this.ruleForm2.merchantAccount,
            shopkeeperName: this.ruleForm2.shopkeeperName,
            shopkeeperPhoneNumber: this.ruleForm2.shopkeeperPhoneNumber,
            shopkeeperCardId: this.ruleForm2.shopkeeperCardId,
            bursePassword: this.ruleForm2.bursePassword,
            updateTime: this.ruleForm2.updateTime
          };

          this.$axios({
            method: 'put',
            url: 'http://localhost:8001/business',
            data: data
          }).then( result => {
            if (result){
              axios.get('http://localhost:8001/business/login',{
                params: {
                  merchantAccount: this.ruleForm2.merchantAccount,
                  merchantPassword: this.ruleForm2.merchantPassword
                }
              }).then( revert => {
                console.log("1:---"+revert);
                console.log("2:---"+revert.data);
                if (revert.data != "" && revert.data != null){
                  Cookie.set("merchant", revert.data);

                  this.$message({
                    message: '修改完成',
                    type: 'success'
                  });

                }
              });

            }else{
              this.$message({
                message: '修改失败',
                type: 'error'
              });
            }
            this.visible = false;
          });

        }else{
          this.$message({
            message: '两次密码输入不一致'
          });
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  },
  mounted () {
    // this.getList()
  }
}
</script>
<style scoped>
  .demo-ruleForm {
    width: 460px;
    padding-top: 25px;
  }
  .el-select {
    width: 100%;
  }
  .card {
    width: 560px;
    padding-bottom: 15px;
    margin: 0px auto;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
